<#assign module="car"/>

<@override name="header">
<style>
li{
    list-style: none;
}
ul{
    list-style: none;
}
tr,td{
border:1px solid #DDDDDD;
}
.border{
	padding:0px;
}
</style>
</@override>
<@override name="body">
<div class="row" >
	<div class="col-xs-12 " >
			<button class="pull-right btn btn-primary" onclick="window.location='${ctx}/brand/toAdd';"><i class="icon-plus"></i>&nbsp;添加品牌</button>
	</div>
</div>
<div class="row margin-top">
	<div class="col-md-12">
		<div class="panel panel-default" >
			<div class="panel-body border" style="width:auto;">
				<#if (page.content)??>
				<table style="width:100%;border:none" >
					<tbody style="background-color:#eee;">
						<#list page.content as brand>
	                        <tr>
	                            <td style="width:15%;">
	                        	<div style="margin-top:15px;margin-left:25px;">
	                        		<div style="float:left">
		                          		 <img width="100" height="100" src="${ctx}/${brand.photo}" alt="品牌图片">
	                        		</div>
                            		<div  style="float:left">
                            			<ul>
                            				<li>
                            					<a href="javascript:;" title="添加${brand.name}型号" class="addBrandType"  brandId="${brand.id}" brandName="${brand.name}"><i class="icon-plus"></i> 添加型号</a>
                            				</li>
											<li style="padding-top:20px;">
												<a href="javascript:;" class="deletethis" data-value="${brand.id}"><i class="glyphicon glyphicon-trash"></i> 删除品牌</a>
											</li>
										</ul>
                            		</div>
                            	</div>
	                            <div style="margin:1px 10px 10px 50px;clear:both; font-size:20px;">
	                            <a style="color:red;cursor:pointer;" href="${ctx}/brand/edit/${brand.id}" data-toggle="tooltip" title="修改品牌">${brand.name}</a></div>
	                            </td>
	                            <td>
	                        	<#if brand.brandTypes??>
		                        	<#list brand.brandTypes as t>
		                        		<div class="col-md-2" style="text-align:center;">
											<div class="col-md-12"  style="margin-top:15px;">
												<a class="updateBrandType" brandId="${brand.id}" brandName="${brand.name}" brandTypeId="${t.id}" brandTypeName="${t.name}" sequence="${t.sequence}" style="font-size:20px; color:green;cursor:pointer;">${t.name}</a>
												<a href="javascript:;"  class="btn-link deleteType" data-value="${t.id}" data-toggle="tooltip" ><i class="glyphicon glyphicon-trash"></i></a>
											</div>
										</div>
									 </#list>
								 </#if>
		                         </td>
	                        </tr>
	                	</#list>	
	                	</tbody>
            	</table> 
				</#if>
			</div>
		</div>
	</div>
</div>

<!--添加型号-->
<div class="form-horizontal">
	<div class="modal fade" id="dialog_brandType">
	   <div class="modal-dialog">
	     <div class="modal-content">
	    	<div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	        	<h4 class="modal-title">添加型号</h4>
	        </div>
		    <div class="modal-body">
	      	<form action="${ctx}/brandType/add"  method="post">
	      	<input type="hidden"  id="brandId">
		      	<div class="form-group">
	      	 		<label class="col-sm-3 control-label">所属品牌:</label>
                    <div class="col-sm-8">
                    	<label  class="control-label" id="brandName" ></label>
                    </div>
		        </div>
		         <div class="form-group">
                    <label class="col-sm-3 control-label">品牌型号名称:</label>
                    <div class="col-sm-8">
                    	<input class="form-control" id="name" name="name" type="text"  required />
                    </div>
				 </div>
				 <div class="form-group">   
	      		 	  <label class="col-sm-3 control-label">品牌类型顺序：</label>
	      		 	   <div class="col-sm-8">
	      		 	       <input class="form-control" id="sequence" name="sequence" type="number" min="0" required /> 
	      		      </div>
		      	 </div>
				 <div class="form-group">
	             	  <div class="col-sm-4">
	            	  </div>
	            	  <div class="col-sm-6">
				      	  <button id="save" type="button" class="btn btn-primary">保存</button>
					      <button id="close_modal_brandType"  type="button" class="btn btn-default">关闭</button>
		        	  </div>
		           </div>  
		  	</form>
	     	</div>
	     </div>
	  </div>
	</div>
</div>

<!--修改型号-->
<div class="form-horizontal">
	<div class="modal fade" id="dialog_update_brandType">
	   <div class="modal-dialog">
	     <div class="modal-content">
	    	<div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	        	<h4 class="modal-title">修改型号</h4>
	        </div>
		    <div class="modal-body">
	      	<form action="${ctx}/brandType/update"  method="post">
	      	<input type="hidden"  id="brandId2">
	      	<input type="hidden"  id="brandTypeId">
		      	<div class="form-group">
	      	 		<label class="col-sm-3 control-label">所属品牌:</label>
                    <div class="col-sm-8">
                    	<label  class="control-label" id="brandName2" ></label>
                    </div>
		        </div>
		         <div class="form-group">
                    <label class="col-sm-3 control-label">品牌型号名称:</label>
                    <div class="col-sm-8">
                    	<input class="form-control" id="brandTypeName" name="brandTypeName" type="text"  required />
                    </div>
				 </div>
				 <div class="form-group">   
	      		 	  <label class="col-sm-3 control-label">品牌类型顺序：</label>
	      		 	   <div class="col-sm-8">
	      		 	       <input class="form-control" id="sequence2" name="sequence" type="number" min="0" required /> 
	      		      </div>
		      	 </div>
				 <div class="form-group">
	             	  <div class="col-sm-4">
	            	  </div>
	            	  <div class="col-sm-6">
				      	  <button id="update" type="button" class="btn btn-primary">修改</button>
					      <button id="close_update_brandType"  type="button" class="btn btn-default">关闭</button>
		        	  </div>
		           </div>  
		  	</form>
	     	</div>
	     </div>
	  </div>
	</div>
</div>
</@override>
<@override name="footer">
<script type="text/javascript">
	var thisButton;
	function deleteBrand() {
	    $.post('${ctx}/brand/delete',{'id':thisButton.attr("data-value")},function(data){
	            if(data.success){
	            	thisButton.parent().parent().remove();
	                $.scojs_message('品牌删除成功', $.scojs_message.TYPE_OK);
	                setTimeout(function(){
							window.location.reload(true);
					}, 1000);
	            }else{
	                $.scojs_message(data.message, $.scojs_message.TYPE_ERROR);
	            }
	    },'json');
	}
	$(document).ready(function(){
	    $(".deletethis").click(function(){
	          thisButton = $(this);
	          var confirm = $.scojs_confirm({
	            content: "你真的要删除该品牌吗？",
	            action:deleteBrand
	          });
	          confirm.show();
	    });
	});
	var thisButton;
	function deleteBrandType() {
	    $.post('${ctx}/brandType/delete',{'id':thisButton.attr("data-value")},function(data){
	            if(data.success){
            		thisButton.parent().parent().remove();
	                $.scojs_message('型号删除成功', $.scojs_message.TYPE_OK);
	            } else {
	                $.scojs_message(data.message, $.scojs_message.TYPE_ERROR);
	            }
	    },'json');
	}
	
	$(document).ready(function(){
	    $(".deleteType").click(function(){
	          thisButton = $(this);
	          var confirm = $.scojs_confirm({
	            content: "你真的要删除该型号吗？",
	            action:deleteBrandType
	          });
	          confirm.show();
	    });
	});
	//添加品牌对应的型号
	$(".addBrandType").click(function(){
			$('#brandId').val($(this).attr('brandId'));
			$('#brandName').html($(this).attr('brandName'));
			$('#dialog_brandType').modal();
   		});
		
		$("#save").click(function(){
			var name=$("#name").val().trim();
			if(name==null || name==""){
	  				$.scojs_message("名称不能为空", $.scojs_message.TYPE_ERROR);
					return;
			}
	   		var params={brandId:$("#brandId").val(),name:$("#name").val(),sequence:$("#sequence").val()}
			$.post('${ctx}/brandType/add',params,function(data){
				if(data.success){
					$('#dialog_cancle').modal("hide");
	  				$.scojs_message("添加品牌型号成功", $.scojs_message.TYPE_OK);
	  				setTimeout(function(){
							window.location.reload(true);
					}, 1000);
				}else{
	  				$.scojs_message(data.message, $.scojs_message.TYPE_ERROR);
				}
			});
		});
		
	    $("#close_modal_brandType").click(function(){
			$('#dialog_brandType').modal("hide");
		});
		
	//修改品牌对应的型号
	$(".updateBrandType").click(function(){
		$('#brandId2').val($(this).attr('brandId'));
		$('#brandName2').html($(this).attr('brandName'));
		$('#brandTypeId').val($(this).attr('brandTypeId'));
		$('#brandTypeName').val($(this).attr('brandTypeName'));
		$('#sequence2').val($(this).attr('sequence'));
		$('#dialog_update_brandType').modal();
	});
	
	$("#update").click(function(){
		var brandTypeName=$("#brandTypeName").val().trim();
		if(brandTypeName==null || brandTypeName==""){
			$.scojs_message("品牌型号名称不能为空", $.scojs_message.TYPE_ERROR);
			return;
		}
   		var params={brandTypeId:$("#brandTypeId").val(),brandTypeName:$("#brandTypeName").val(),brandName:$("#brandName2").val(),brandId:$("#brandId2").val(),sequence:$("#sequence2").val()}
		$.post('${ctx}/brandType/update',params,function(data){
			if(data.success){
  				$.scojs_message("添加品牌型号成功", $.scojs_message.TYPE_OK);
				$('#dialog_update_brandType').modal("hide");
  				setTimeout(function(){
						window.location.reload(true);
				}, 1000);
			}else{
  				$.scojs_message(data.message, $.scojs_message.TYPE_ERROR);
			}
		});
	});
	
    $("#close_update_brandType").click(function(){
		$('#dialog_update_brandType').modal("hide");
	});
	
</script>
</@override>
<@extends name="../layout.ftl"/>